<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>分支地图查询</title>
    <link rel="stylesheet" type="text/css" href="  /branchmap/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="  /branchmap/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="  /branchmap/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="  /branchmap/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="  /branchmap/h-ui.admin/css/style.css" />
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">

    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <style type="text/css">
        /*body
        {
            margin: 0;
            height: 100%;
            width: 100%;
            position: absolute;
            font-size: 12px;
        }*/
        .main-container
        {
            margin: 30px;
        }
        .search-form
        {
            margin: 0px;
            width: 100%;
            height: 60px;
        }
        #mapContainer
        {
            position: absolute;
            top: 68px;
            margin: 15px;
            left: 185px;
            border: 1px solid #88B5E2;
            right: 230px;
            bottom: -12px;
        }
        .Hui-aside{
            margin-top: 39px;
            background-color: #88B5E2;
            color: #0C0C0C;
            font-weight:600;
            font-size: 16px;
        }
        .menu_dropdown ul{
            background-color: #E8F7F9;
        }
        #branchmap{
            position: absolute;
            top: 25px;
            margin: 15px;
            left: 225px;
            border: 1px solid #ffffff;
            right: 8px;
            bottom: 0;
        }
    </style>
</head>
<body>
<section id="container">
    <#include "sider.ftl">  <#--引入头部和导航栏-->
<#--本页为模板，请大家复制之后使用，不要直接在模板上加东西-->
<#--大家在测试自己的页面时，在controller中TestController     test3.do进行测试      在地址栏输入localhost:8080/test3.do-->
    <section id="main-content">

        <section class="wrapper" id="branchmap" style="width: 100%;">
           <#-- <div class="table-agile-info">
                <section class="panel panel-default">
                    &lt;#&ndash;<div class="panel-heading">
                        分支信息
                    </div>&ndash;&gt;
                    &lt;#&ndash;<section class="panel" >&ndash;&gt;
                        <div >-->
                            <aside class="Hui-aside">
                                <div class="menu_dropdown bk_2">
                                   <#list list as z>
                                        <dl id="menu-article">
                                            <dt>支点名称：${z.bname}<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
                                                <dd>
                                                <ul>
                                                    <li><a   onclick="chakan('${z.blocation}')">地址：${z.blocation}</a></li>
                                                    <li><a   >联系人：${z.uname}</a></li>
                                                    <li><a   >联系人电话：${z.phone}</a></li>
                                                    <li><a   >公司电话：${z.btelephone}</a></li>
                                                    <li><a   href="javascript:void(0)">类型：${z.bdesc}</a></li>
                                                </ul>
                                            </dd>
                                        </dl>
                                    </#list>
                                    <#--<dl id="menu-article" v-for="(item,index) in result">
                                        <dt>支点名称：{{item.bname}}<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
                                        <dd>
                                            <ul>
                                                <li><a   onmousemove="chakan(item.blocation)">地址：{{item.blocation}}</a></li>
                                                <li><a   >联系人：{{item.uname}}</a></li>
                                                <li><a   >联系人电话：{{item.phone}}</a></li>
                                                <li><a   >公司电话：{{item.telephone}}</a></li>
                                                <li><a   href="javascript:void(0)">类型：{{item.bdesc}}</a></li>
                                            </ul>
                                        </dd>
                                    </dl>-->
                                </div>
                            </aside>
                            <div class="main-container">
                                <div class="search-form">
                                    <form id="form1">
                                        <div class="text-c">
                                            <input type="text" class="input-text" style="width:650px" placeholder="输入分支地点" value="郑州中原万达" id="SearchKey" name="">
                                            <button type="button" class="btn btn-success radius" id="" name="" onclick="placeSearch();"><i class="Hui-iconfont">&#xe665;</i> &nbsp;&nbsp;查询&nbsp;&nbsp;</button>
                                        </div>
                                    </form>
                                </div>
                                <div id="mapContainer"></div>
                            </div>
              <#--          </div>
                </section>
            </div>-->
        </section>
        <#include "/foot.html"><#--引入底部-->
    </section>
</section>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="  /branchmap/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="  /branchmap/layer/2.4/layer.js"></script>
<script type="text/javascript" src="  /branchmap/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="  /branchmap/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<script type="text/javascript" src="/branchmap/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/branchmap/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/branchmap/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=1994ba35a603f806df16000f3799b1da"></script>
<script type="text/javascript">
   /* var app=new Vue({
        el:"#branchmap",
        data:{
            result:[]
        }
    });
    var getBranchMap=function () {
        $.ajax({
            type:"POST",
            url:"/branch/getbranchmap.do",
            data:{},
            contentType:"application/json",
            success:function (msg) {
                alert(msg.list);
                app.result=msg.list;
            }
        });
    }
    getBranchMap();*/
    var chakan=function(op){
        $("#SearchKey").val(op);
        placeSearch();
    }

    var marker;
    var windowsArr;
    var toolBar = null;
    var overView;
    var editorTool;
    var map = new AMap.Map("mapContainer", {
        resizeEnable: true,zoom:12
    });
    map.plugin(["AMap.ToolBar"], function () {
        toolBar = new AMap.ToolBar();
        map.addControl(toolBar);
    });
    //在地图中添加鹰眼插件
    map.plugin(["AMap.OverView"], function () {
        //加载鹰眼
        //初始化隐藏鹰眼
        overView = new AMap.OverView({
            visible: true
        });
        map.addControl(overView);
    });
    //添加地图类型切换插件
    map.plugin(["AMap.MapType"], function () {
        //地图类型切换
        var mapType = new AMap.MapType({
            defaultType: 0, //默认显示卫星图
            showRoad: true //叠加路网图层
        });
        map.addControl(mapType);
    });
    //加载比例尺插件
    map.plugin(["AMap.Scale"], function () {
        scale = new AMap.Scale();
        map.addControl(scale);
    });




    //基本地图加载
    function placeSearch() {
        map = new AMap.Map("mapContainer", {
            resizeEnable: true
        });
        map.plugin(["AMap.ToolBar"], function () {
            toolBar = new AMap.ToolBar();
            map.addControl(toolBar);
        });
        //在地图中添加鹰眼插件
        map.plugin(["AMap.OverView"], function () {
            //加载鹰眼
            //初始化隐藏鹰眼
            overView = new AMap.OverView({
                visible: true
            });
            map.addControl(overView);
        });
        //添加地图类型切换插件
        map.plugin(["AMap.MapType"], function () {
            //地图类型切换
            var mapType = new AMap.MapType({
                defaultType: 0, //默认显示卫星图
                showRoad: true //叠加路网图层
            });
            map.addControl(mapType);
        });
        //加载比例尺插件
        map.plugin(["AMap.Scale"], function () {
            scale = new AMap.Scale();
            map.addControl(scale);
        });
        //设置多边形的属性
        var polygonOption = {
            strokeColor: "#0000ff",
            strokeOpacity: 1,
            strokeWeight: 3
        };
        var polygonArr;
        //在地图中添加MouseTool插件
        map.plugin(["AMap.MouseTool"], function () {
            var mouseTool = new AMap.MouseTool(map);
            //使用鼠标工具绘制多边形
            mouseTool.polygon(polygonOption);
            AMap.event.addListener(mouseTool, "draw", function (e) {
                //obj属性就是绘制完成的覆盖物对象
                var drawObj = e.obj;
                //获取节点个数
                var pointsCount = e.obj.getPath().length;

                polygonArr = new Array(); //构建多边形经纬度坐标数组
                for (var i = 0; i < pointsCount; i++) {
                    polygonArr.push(new AMap.LngLat(e.obj.getPath()[i].lng, e.obj.getPath()[i].lat));
                }
                var polygon = new AMap.Polygon({
                    map: map,
                    path: polygonArr,
                    fillColor: "#f5deb3",
                    fillOpacity: 0.35
                });
                //添加编辑控件
                map.plugin(["AMap.PolyEditor"], function () {
                    editorTool = new AMap.PolyEditor(map, polygon);
                });
            });
        });

        marker = new Array();
        windowsArr = new Array();
        var searchKey = $("#SearchKey").val();
        var MSearch;
        AMap.service(["AMap.PlaceSearch"], function () {
            MSearch = new AMap.PlaceSearch({ //构造地点查询类
                pageSize: 10,
                pageIndex: 1,
                city: "021" //城市编号
            });
            //关键字查询
            MSearch.search(searchKey, function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    keywordSearch_CallBack(result);
                }
            });
        });
    }
    //进入页面加载地图
    placeSearch();

    function edditpolygon() {
        editorTool.open();
    }
    function endEddit() {
        editorTool.close();
    }
    //添加marker&infowindow
    function addmarker(i, d) {
        var lngX = d.location.getLng();
        var latY = d.location.getLat();
        var markerOption = {
            map: map,
            icon: "http://webapi.amap.com/images/" + (i + 1) + ".png",
            position: new AMap.LngLat(lngX, latY),
            topWhenMouseOver: true
        };
        var mar = new AMap.Marker(markerOption);
        marker.push(new AMap.LngLat(lngX, latY));

        var infoWindow = new AMap.InfoWindow({
            content: "<h3><font color=\"#00a6ac\">  " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),
            size: new AMap.Size(300, 0),
            autoMove: true,
            offset: new AMap.Pixel(0, -20)
        });
        windowsArr.push(infoWindow);
        var aa = function (e) { infoWindow.open(map, mar.getPosition()); };
        AMap.event.addListener(mar, "mouseover", aa);
    }
    //回调函数
    function keywordSearch_CallBack(data) {
        var resultStr = "";
        var poiArr = data.poiList.pois;
        var resultCount = poiArr.length;
        for (var i = 0; i < resultCount; i++) {
            resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
            resultStr += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
            addmarker(i, poiArr[i]);
        }
        map.setFitView();
    }
    function TipContents(type, address, tel) {  //窗体内容
        if (type =="" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
            type = "暂无";
        }
        if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
            address = "暂无";
        }
        if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
            tel = "暂无";
        }
        var str = "  地址：" + address + "<br />  电话：" + tel + " <br />  类型：" + type;
        return str;
    }
    function openMarkerTipById1(pointid, thiss) {  //根据id 打开搜索结果点tip
        thiss.style.background = '#CAE1FF';
        windowsArr[pointid].open(map, marker[pointid]);
    }
    function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
        thiss.style.background = "";
    }
</script>
</body>
</html>
